<template>
  <div>
    <div class="u-block">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>default</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-carousel :interval="4000" type="card" height="200px">
      <el-carousel-item v-for="item in 6" :key="item">
        <img src="http://placehold.it/350x200" class="image">
      </el-carousel-item>
    </el-carousel>
    <div class="u-block">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card :body-style="{ padding: '0px' }">
            <img src="http://placehold.it/350x200" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{ padding: '0px' }">
            <img src="http://placehold.it/350x200" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card :body-style="{ padding: '0px' }">
            <img src="http://placehold.it/350x200" class="image">
            <div style="padding: 14px;">
              <span>好吃的汉堡</span>
              <div class="bottom clearfix">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button">操作按钮</el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="u-block">
      <el-row :gutter="20">
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
      </el-row>
      <el-row :gutter="20" class="margin_t20">
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
        <el-col :span="6">
          <img src="http://placehold.it/350x200" class="image">
        </el-col>
      </el-row>
    </div>
    <div class="u-block">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in 6">
          <el-row :gutter="10">
            <el-col :span="6">
              <img src="http://placehold.it/350x200" class="image">
            </el-col>
            <el-col :span="18">
              <h4>xxxx</h4>
              <p>yyyyy</p>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
/*element*/
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI, { size: 'small' })
export default {
   data(){
    return {
        currentDate:(new Date().toLocaleString())
      }
   }
}
</script>

<style scoped>
.el-carousel__item h3 { color: #475669; font-size: 14px; opacity: 0.75; line-height: 200px; margin: 0; }
.el-carousel__item:nth-child(2n) { background-color: #99a9bf; }
.el-carousel__item:nth-child(2n+1) { background-color: #d3dce6; }
.image { width: 100%; }
.margin_t20 { margin-top: 20px; }
</style>
